<template>
  <div id="userLoginView">
    <div class="login-container">
      <div class="login-content">
        <div class="login-header">
          <div class="logo-wrapper">
            <div class="logo-glow"></div>
            <h1 class="logo-text">面试通</h1>
          </div>
          <p class="subtitle">智能面试助手，助你职场成功</p>
        </div>

        <a-form
          :model="formState"
          name="basic"
          autocomplete="off"
          @finish="onFinish"
          layout="vertical"
          class="login-form"
        >
          <a-form-item name="userAccount" :rules="[{ required: true, message: '请输入账号' }]">
            <a-input
              v-model:value="formState.userAccount"
              size="large"
              placeholder="请输入账号"
              :prefix="h(UserOutlined)"
            />
          </a-form-item>

          <a-form-item name="userPassword" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password
              v-model:value="formState.userPassword"
              size="large"
              placeholder="请输入密码"
              :prefix="h(LockOutlined)"
            />
          </a-form-item>

          <a-form-item
            name="userInterviewRole"
            :rules="[{ required: true, message: '请选择身份类型' }]"
          >
            <a-radio-group v-model:value="formState.userInterviewRole">
              <a-radio value="0">实习生</a-radio>
              <a-radio value="1">校招</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item>
            <a-checkbox v-model:checked="privacyAgreementChecked">
              本人已阅读并同意
              <a @click.prevent="privacyModalVisible = true" class="privacy-link"
                >《用户隐私协议》</a
              >
            </a-checkbox>
          </a-form-item>

          <a-form-item>
            <a-button
              class="login-button"
              type="primary"
              html-type="submit"
              size="large"
              :loading="loading"
              :disabled="!privacyAgreementChecked"
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>

        <div class="login-footer">
          <p>
            <a @click="router.push('/admin/login')" class="user-link">管理员登录</a> |
            <a @click="router.push('/recruiter/login')" class="recruiter-link">招聘者登录</a> |
            <a @click="router.push('/user/register')" class="recruiter-link">用户注册</a>
          </p>
        </div>
      </div>
    </div>

    <!-- 装饰元素 -->
    <div class="decoration-elements">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
      <div class="dots dots-1"></div>
      <div class="dots dots-2"></div>
      <div class="wave wave-1"></div>
    </div>

    <!-- 全屏隐私协议视图 -->
    <div v-if="privacyModalVisible" class="privacy-overlay">
      <div class="privacy-header">
        <h2>用户隐私协议</h2>
        <a-button type="primary" shape="circle" @click="privacyModalVisible = false" size="large">
          <template #icon><CloseOutlined /></template>
        </a-button>
      </div>
      <div class="privacy-content">
        <p class="update-date">更新日期: 2023年10月27日</p>
        <p>
          欢迎使用"面试通"！我们（以下简称"我们"或"面试通"）深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。我们致力于维持您对我们的信任，恪守权责一致、目的明确、选择同意、最少够用、确保安全、主体参与、公开透明等原则，保护您的个人信息。
        </p>

        <h3>1. 我们如何收集和使用您的个人信息</h3>
        <p>在您使用我们的产品及/或服务时，我们可能需要收集和使用您的个人信息，其中主要包括：</p>
        <h4>1.1 核心业务功能所需信息</h4>
        <p>为完成帐号的注册、登录并正常使用我们的核心服务，您需要向我们提供以下信息：</p>
        <ul>
          <li>
            <strong>账号注册信息：</strong
            >当您注册时，您需要至少向我们提供您的手机号码或电子邮箱作为登录账号，并创建您的登录密码。
          </li>
          <li>
            <strong>个人资料：</strong
            >为了更好地为您提供求职服务，我们建议您提供真实姓名、性别、所属学校/公司、联系电话、电子邮箱等信息。
          </li>
        </ul>
        <h4>1.2 附加业务功能所需信息</h4>
        <p>
          为向您提供更优化的服务，您可以选择授权我们收集和使用您的其他信息。如果您不提供这些信息，您仍然可以正常使用我们的核心服务，但可能会影响您使用某些高级功能。
        </p>
        <ul>
          <li>
            <strong>简历信息：</strong
            >您可以上传或在线填写您的教育背景、工作经历、项目经验、技能证书等，以便我们为您生成更精准的分析报告和面试模拟。
          </li>
          <li>
            <strong>设备信息：</strong
            >在您使用服务的过程中，我们可能会收集您的设备型号、操作系统版本、IP地址等信息，以保障您的账号与系统安全。
          </li>
        </ul>

        <h3>2. 我们如何共享、转让、公开披露您的个人信息</h3>
        <p>我们承诺对您的信息进行严格保密。除以下情况外，我们不会与任何第三方分享您的个人信息：</p>
        <ul>
          <li>获得您的明确同意或授权。</li>
          <li>
            根据适用的法律法规、法律程序的要求、强制性的行政或司法要求所必须的情况下进行提供。
          </li>
          <li>
            在法律法规允许的范围内，为维护面试通、您或其他用户的合法权益或社会公共利益、财产或安全免遭损害而有必要提供。
          </li>
        </ul>
        <p>
          我们不会将您的个人信息转让给任何公司、组织和个人，除非获取您的明确同意，或在涉及合并、收购或破产清算时，我们会要求新的持有您个人信息的公司、组织继续受本隐私协议的约束。
        </p>

        <h3>3. 我们如何保护您的个人信息</h3>
        <p>
          我们已采取符合业界标准、合理可行的安全防护措施保护您提供的个人信息安全，防止个人信息遭到未经授权访问、公开披露、使用、修改、损坏或丢失。例如，我们对网站提供HTTPS协议安全浏览方式；我们会使用加密技术提高个人信息的安全性；我们会部署访问控制机制，尽力确保只有授权人员才可访问个人信息。
        </p>

        <h3>4. 您的权利</h3>
        <p>我们保障您对自己的个人信息行使以下权利：</p>
        <ul>
          <li><strong>访问和更正：</strong>您有权随时访问和更正您的个人资料。</li>
          <li>
            <strong>删除：</strong>在符合相关法律规定的情形下，您可以请求我们删除您的个人信息。
          </li>
          <li>
            <strong>撤回同意：</strong>您可以改变您授权我们继续收集个人信息的范围或撤回您的授权。
          </li>
          <li><strong>注销账户：</strong>您随时可以注销此前注册的账户。</li>
        </ul>

        <h3>5. 未成年人保护</h3>
        <p>
          我们的产品、网站和服务主要面向成人。若您是18周岁以下的未成年人，在使用我们的产品和服务前，应在您的父母或其他监护人的监护、指导下共同阅读并同意本隐私协议。
        </p>

        <h3>6. 隐私协议的更新</h3>
        <p>
          我们的隐私协议可能会适时更新。对于重大变更，我们会提供更为显著的通知（例如通过网站公示、弹窗提示等方式），并说明具体变更内容。
        </p>

        <h3>7. 如何联系我们</h3>
        <p>
          如果您对本隐私政策有任何疑问、意见或建议，请通过发送邮件至 privacy-support@mianshitong.com
          与我们联系。我们将在15个工作日内作出答复。
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, h, onMounted, nextTick } from 'vue'
import { userLoginUsingPost } from '@/api/userController'
import { useLoginUserStore } from '@/stores/useLoginUserstore'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { UserOutlined, LockOutlined, CloseOutlined } from '@ant-design/icons-vue'
import gsap from 'gsap'
import ACCESS_ENUM from '@/access/accessEnum'

const userStore = useLoginUserStore()
const router = useRouter()
const route = useRoute()
const loading = ref(false)
const privacyAgreementChecked = ref(false)
const privacyModalVisible = ref(false)

// 获取 redirect 参数
const redirectUrl = route.query.redirect

const formState = ref({
  userAccount: '',
  userPassword: '',
  role: ACCESS_ENUM.USER,
  userInterviewRole: '',
})

const onFinish = async () => {
  if (!privacyAgreementChecked.value) {
    message.warning('请阅读并同意《用户隐私协议》')
    return
  }

  loading.value = true
  try {
    //发送请求登录
    const data = await userLoginUsingPost({
      ...(formState.value as any),
    })
    if (data?.code === 0) {
      console.log('登录成功')
      //登录成功
      //获取用户信息
      await userStore.fetchLoginUser()
      await userStore.fetchUserInterviewRole()
      message.success('登录成功')

      if (redirectUrl) {
        // 判断是否是绝对地址
        if (typeof redirectUrl === 'string' && redirectUrl.startsWith('http')) {
          window.location.replace(redirectUrl) // 浏览器原生跳转，不通过 Vue Router
        } else {
          router.replace(redirectUrl.toString()) // Vue Router 内部跳转
        }
      } else {
        router.replace({
          path: '/',
        })
      }
    } else {
      //登录失败
      message.error(data.message)
    }
  } catch (error) {
    console.error('登录失败:', error)
    message.error('登录失败，请稍后再试')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  nextTick(() => {
    gsap.from('.login-container', { opacity: 0, y: 40, duration: 1, ease: 'power3.out' })
    gsap.from('.logo-wrapper', {
      opacity: 0,
      scale: 0.9,
      duration: 0.8,
      delay: 0.2,
      ease: 'back.out(1.7)',
    })
    gsap.from('.login-header .subtitle', { opacity: 0, y: 20, duration: 0.7, delay: 0.3 })
    gsap.from('.login-form .a-form-item', {
      opacity: 0,
      y: 20,
      duration: 0.7,
      delay: 0.4,
      stagger: 0.1,
    })
    gsap.from('.login-footer', { opacity: 0, y: 10, duration: 0.7, delay: 0.8 })
    gsap.from('.decoration-elements .circle', {
      opacity: 0,
      scale: 0.8,
      duration: 1,
      delay: 0.3,
      stagger: 0.2,
      ease: 'elastic.out(1, 0.5)',
    })
    gsap.from('.decoration-elements .dots', {
      opacity: 0,
      y: 10,
      duration: 1,
      delay: 0.5,
      stagger: 0.2,
    })
    gsap.from('.decoration-elements .wave', { opacity: 0, x: -10, duration: 1, delay: 0.7 })
  })
})
</script>

<style scoped>
.privacy-link {
  color: #1890ff;
  font-weight: 500;
  transition: color 0.3s;
}

.privacy-link:hover {
  color: #40a9ff;
}

/* 隐私弹窗样式 */
:deep(.privacy-modal) {
  max-height: 100vh;
}

.privacy-content {
  padding-right: 16px; /* 滚动条空间 */
}

.privacy-content h3 {
  color: #333;
  margin-top: 24px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.privacy-content h4 {
  color: #555;
  margin-top: 16px;
  margin-bottom: 8px;
}

.privacy-content p {
  line-height: 1.8;
  color: #666;
}

.privacy-content ul {
  padding-left: 20px;
}

.privacy-content li {
  margin-bottom: 8px;
}

.update-date {
  text-align: right;
  color: #999;
  font-size: 14px;
  margin-bottom: 20px;
}

/* 其他已有样式保持不变 */
.ant-input-password {
  height: 65px !important;
}

#userLoginView {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #f5f9ff 0%, #e8f0fe 100%);
  background-image: radial-gradient(circle at 10% 20%, rgba(24, 144, 255, 0.1) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(65, 117, 232, 0.1) 0%, transparent 20%),
    linear-gradient(
      to right,
      rgba(24, 144, 255, 0.05) 0%,
      rgba(24, 144, 255, 0.03) 20%,
      transparent 80%
    );
  animation: waveAnimation 15s ease infinite;
}

@keyframes waveAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.login-container {
  width: 550px;
  max-width: 90%;
  z-index: 10;
  transform: scale(1.05);
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.08);
    box-shadow: 0 20px 50px rgba(24, 144, 255, 0.15);
  }
}

.login-content {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 16px 40px rgba(24, 144, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.9);
  overflow: hidden;
  position: relative;
}

.login-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, rgba(24, 144, 255, 0.8), rgba(65, 117, 232, 0.8));
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.logo-text {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, rgba(24, 144, 255, 1), rgba(65, 117, 232, 1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}

.logo-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 144, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(15px);
  opacity: 0.8;
  z-index: -1;
  transform: scale(1.5);
}

.subtitle {
  font-size: 16px;
  color: #666;
  margin-top: 8px;
  margin-bottom: 0;
}

.login-form {
  margin-top: 40px;
}

:deep(.ant-input),
:deep(.ant-input-password) {
  height: 50px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

:deep(.ant-input:hover),
:deep(.ant-input-password:hover) {
  border-color: rgba(24, 144, 255, 0.4);
}

:deep(.ant-input:focus),
:deep(.ant-input-affix-wrapper-focused) {
  border-color: rgba(24, 144, 255, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1) !important;
}

:deep(.ant-input-prefix) {
  color: rgba(24, 144, 255, 0.8);
  font-size: 18px;
  margin-right: 10px;
}

.forgot-link {
  color: rgba(24, 144, 255, 0.8);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.forgot-link:hover {
  color: rgba(24, 144, 255, 1);
  text-decoration: underline;
}

.login-button {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.95), rgba(65, 117, 232, 0.95));
  border: none;
  box-shadow: 0 4px 12px rgba(65, 117, 232, 0.25);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(65, 117, 232, 0.3);
  background: linear-gradient(135deg, rgb(24, 144, 255), rgb(65, 117, 232));
}

.login-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(65, 117, 232, 0.2);
}

.login-footer {
  text-align: center;
  margin-top: 30px;
  color: #666;
  font-size: 14px;
}

.user-link,
.recruiter-link {
  color: rgba(0, 21, 77, 0.9);
  font-weight: 500;
  transition: all 0.3s ease;
  margin: 0 5px;
}

.user-link:hover,
.recruiter-link:hover {
  color: rgba(0, 21, 77, 1);
  text-decoration: underline;
}

/* 装饰元素 */
.decoration-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.08), rgba(65, 117, 232, 0.08));
  opacity: 0.6;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.circle-1 {
  width: 400px;
  height: 400px;
  top: -150px;
  right: -150px;
}

.circle-2 {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: -100px;
}

.circle-3 {
  width: 200px;
  height: 200px;
  top: 50%;
  left: 60%;
  opacity: 0.3;
}

.dots {
  position: absolute;
  background-image: radial-gradient(rgba(24, 144, 255, 0.2) 2px, transparent 2px);
  background-size: 20px 20px;
}

.dots-1 {
  width: 250px;
  height: 250px;
  top: 10%;
  left: 10%;
}

.dots-2 {
  width: 200px;
  height: 200px;
  bottom: 10%;
  right: 15%;
  opacity: 0.5;
  background-size: 15px 15px;
}

.wave {
  position: absolute;
  background: linear-gradient(
    -45deg,
    rgba(24, 144, 255, 0.06) 25%,
    transparent 25%,
    transparent 50%,
    rgba(24, 144, 255, 0.06) 50%,
    rgba(24, 144, 255, 0.06) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
  border-radius: 12px;
}

.wave-1 {
  width: 300px;
  height: 150px;
  bottom: 20%;
  right: 20%;
  transform: rotate(15deg);
  opacity: 0.5;
}

/* 全屏隐私协议视图样式 */
.privacy-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 24px 48px;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.privacy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.privacy-header h2 {
  margin: 0;
  font-size: 28px;
  color: #333;
  font-weight: 600;
}

/* 隐私弹窗样式 */
.privacy-content {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 24px;
}

.privacy-content h3 {
  color: #333;
  margin-top: 24px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.privacy-content h4 {
  color: #555;
  margin-top: 16px;
  margin-bottom: 8px;
}

.privacy-content p {
  line-height: 1.8;
  color: #666;
}

.privacy-content ul {
  padding-left: 20px;
}

.privacy-content li {
  margin-bottom: 8px;
}

.update-date {
  text-align: right;
  color: #999;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
